<template>
  <view class="comment-item">
    <!-- 用户头像 -->
    <BaseAvatar
      :src="comment.user.avatar"
      :text="comment.user.nickname"
      size="small"
      class="comment-avatar"
    />

    <!-- 评论内容 -->
    <view class="comment-content">
      <!-- 用户信息 -->
      <view class="comment-header">
        <text class="user-name">{{ comment.user.nickname }}</text>
        <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
      </view>

      <!-- 评论文字 -->
      <text class="comment-text">{{ comment.content }}</text>

      <!-- 回复内容 -->
      <view v-if="comment.replyTo" class="reply-to">
        <text class="reply-label">回复</text>
        <text class="reply-user">@{{ comment.replyTo.user.nickname }}</text>
        <text class="reply-text">: {{ comment.replyTo.content }}</text>
      </view>

      <!-- 图片列表 -->
      <view v-if="comment.images && comment.images.length > 0" class="comment-images">
        <image
          v-for="(image, index) in comment.images.slice(0, 3)"
          :key="index"
          :src="image"
          class="comment-image"
          mode="aspectFill"
          @click="handleImageClick(image, index)"
        />

        <!-- 更多图片指示 -->
        <view
          v-if="comment.images.length > 3"
          class="more-images"
          @click="handleMoreImages"
        >
          <text class="more-text">+{{ comment.images.length - 3 }}</text>
        </view>
      </view>

      <!-- 操作栏 -->
      <view class="comment-actions">
        <view class="action-item" @click="handleLike">
          <BaseIcon
            :name="comment.isLiked ? 'i-carbon-thumb-up-filled' : 'i-carbon-thumb-up'"
            size="small"
            :color="comment.isLiked ? 'var(--novel-primary)' : 'var(--text-muted)'"
          />
          <text class="action-text">{{ formatCount(comment.likeCount) }}</text>
        </view>

        <view class="action-item" @click="handleReply">
          <BaseIcon name="i-carbon-chat" size="small" />
          <text class="action-text">{{ formatCount(comment.replyCount) }}</text>
        </view>

        <view class="action-item" @click="handleShare">
          <BaseIcon name="i-carbon-share" size="small" />
          <text class="action-text">分享</text>
        </view>
      </view>

      <!-- 子评论列表 -->
      <view v-if="comment.replies && comment.replies.length > 0" class="replies">
        <view
          v-for="reply in comment.replies.slice(0, 2)"
          :key="reply.id"
          class="reply-item"
        >
          <BaseAvatar
            :src="reply.user.avatar"
            :text="reply.user.nickname"
            size="xs"
            class="reply-avatar"
          />
          <view class="reply-content">
            <text class="reply-user-name">{{ reply.user.nickname }}</text>
            <text class="reply-content-text">{{ reply.content }}</text>
            <text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
          </view>
        </view>

        <!-- 查看更多回复 -->
        <view
          v-if="comment.replyCount > 2"
          class="more-replies"
          @click="handleMoreReplies"
        >
          <text class="more-replies-text">
            查看全部 {{ comment.replyCount }} 条回复
          </text>
        </view>
      </view>
    </view>

    <!-- 操作菜单 -->
    <view class="comment-menu" @click.stop>
      <BaseIcon
        name="i-carbon-overflow-menu-horizontal"
        size="small"
        clickable
        @click="handleMenu"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseAvatar from '../ui/BaseAvatar.vue'
import BaseIcon from '../ui/BaseIcon.vue'

interface User {
  id: string
  nickname: string
  avatar?: string
}

interface Comment {
  id: string
  user: User
  content: string
  images?: string[]
  createdAt: string | Date
  likeCount: number
  replyCount: number
  isLiked?: boolean
  replyTo?: {
    id: string
    user: User
    content: string
  }
  replies?: Array<{
    id: string
    user: User
    content: string
    createdAt: string | Date
  }>
}

interface Props {
  // 评论数据
  comment: Comment
  // 是否显示操作菜单
  showMenu?: boolean
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  showMenu: false,
  customClass: '',
})

const emit = defineEmits<{
  like: [comment: Comment]
  reply: [comment: Comment]
  share: [comment: Comment]
  imageClick: [images: string[], index: number]
  moreImages: [comment: Comment]
  moreReplies: [comment: Comment]
  menu: [comment: Comment, event: Event]
}>()

// 格式化时间
const formatTime = (time: string | Date) => {
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour

  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < 7 * day) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return date.toLocaleDateString()
  }
}

// 格式化数量
const formatCount = (count: number) => {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 处理点赞
const handleLike = () => {
  emit('like', props.comment)
}

// 处理回复
const handleReply = () => {
  emit('reply', props.comment)
}

// 处理分享
const handleShare = () => {
  emit('share', props.comment)
}

// 处理图片点击
const handleImageClick = (image: string, index: number) => {
  emit('imageClick', props.comment.images || [], index)
}

// 处理查看更多图片
const handleMoreImages = () => {
  emit('moreImages', props.comment)
}

// 处理查看更多回复
const handleMoreReplies = () => {
  emit('moreReplies', props.comment)
}

// 处理菜单
const handleMenu = (event: Event) => {
  emit('menu', props.comment, event)
}
</script>

<style scoped>
.comment-item {
  @apply flex gap-3 relative;
}

.comment-avatar {
  @apply flex-shrink-0;
}

.comment-content {
  @apply flex-1 min-w-0;
}

.comment-header {
  @apply flex items-center justify-between mb-1;
}

.user-name {
  @apply text-sm font-medium text-text-primary;
}

.comment-time {
  @apply text-xs text-text-muted;
}

.comment-text {
  @apply text-sm text-text-primary mb-2 leading-relaxed;
}

.reply-to {
  @apply mb-2 p-sm bg-bg-light rounded-custom;
}

.reply-label {
  @apply text-xs text-novel-primary mr-1;
}

.reply-user {
  @apply text-xs text-novel-primary font-medium mr-1;
}

.reply-text {
  @apply text-xs text-text-secondary;
}

.comment-images {
  @apply flex gap-2 mb-2 flex-wrap;
}

.comment-image {
  @apply w-20 h-20 object-cover rounded-custom;
}

.more-images {
  @apply w-20 h-20 bg-bg-light rounded-custom flex items-center justify-center cursor-pointer;
}

.more-text {
  @apply text-xs text-text-secondary;
}

.comment-actions {
  @apply flex items-center gap-4;
}

.action-item {
  @apply flex items-center gap-1 cursor-pointer transition-colors duration-200;
}

.action-item:hover {
  .action-text {
    color: var(--novel-primary);
  }
}

.action-text {
  @apply text-xs text-text-muted;
}

.replies {
  @apply mt-3 pt-3 border-t border-custom space-y-2;
}

.reply-item {
  @apply flex gap-2;
}

.reply-avatar {
  @apply flex-shrink-0;
}

.reply-content {
  @apply flex-1 min-w-0;
}

.reply-user-name {
  @apply text-xs text-novel-primary font-medium;
}

.reply-content-text {
  @apply text-xs text-text-secondary mb-1;
}

.reply-time {
  @apply text-xs text-text-muted;
}

.more-replies {
  @apply text-xs text-novel-primary cursor-pointer mt-2;
}

.more-replies-text {
  @apply transition-colors duration-200;
}

.more-replies-text:hover {
  @apply text-novel-secondary;
}

.comment-menu {
  @apply absolute top-0 right-0;
}
</style>